<template>
  <div>
    <k-form-build :value="jsonData" ref="KFB" @submit="handleSubmit" />

    <button @click="hide">隐藏</button>
    <button @click="show">显示</button>
    <button @click="disable">禁用</button>
    <button @click="enable">启用</button>

    <button @click="getData">提交</button>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data() {
    return {
      jsonData: {
        list: [
          {
            type: 'button',
            label: '按钮',
            options: {
              type: 'primary',
              handle: 'submit',
              dynamicFun: '',
              hidden: true,
              disabled: false
            },
            key: 'button_1619948868332'
          },
          {
            type: 'slider',
            label: '滑动输入条',
            icon: 'icon-menu',
            options: {
              width: '100%',
              defaultValue: 0,
              disabled: false,
              hidden: false,
              min: 0,
              max: 100,
              step: 1,
              showInput: false
            },
            model: 'slider_1619948887083',
            key: 'slider_1619948887083',
            help: '',
            rules: [{ required: false, message: '必填项' }]
          },
          {
            type: 'rate',
            label: '评分',
            icon: 'icon-pingfen_moren',
            options: {
              defaultValue: 0,
              max: 5,
              disabled: false,
              hidden: false,
              allowHalf: false
            },
            model: 'rate_1619948887483',
            key: 'rate_1619948887483',
            help: '',
            rules: [{ required: false, message: '必填项' }]
          },
          {
            type: 'uploadImg',
            label: '上传图片',
            icon: 'icon-image',
            options: {
              defaultValue: '[]',
              multiple: false,
              hidden: false,
              disabled: false,
              width: '100%',
              data: '{}',
              limit: 3,
              placeholder: '上传',
              fileName: 'image',
              headers: {},
              action: 'http://cdn.kcz66.com/upload-img.txt',
              listType: 'picture-card'
            },
            model: 'uploadImg_1619948887819',
            key: 'uploadImg_1619948887819',
            help: '',
            rules: [{ required: false, message: '必填项' }]
          },
          {
            type: 'card',
            label: '表单组',
            list: [
              {
                type: 'date',
                label: '日期选择框',
                icon: 'icon-calendar',
                options: {
                  width: '100%',
                  defaultValue: '',
                  rangeDefaultValue: [],
                  range: false,
                  showTime: false,
                  disabled: false,
                  hidden: false,
                  clearable: false,
                  placeholder: '请选择',
                  rangePlaceholder: ['开始时间', '结束时间'],
                  format: 'YYYY-MM-DD'
                },
                model: 'date_1619948975172',
                key: 'date_1619948975172',
                help: '',
                rules: [{ required: false, message: '必填项' }]
              },
              {
                type: 'input',
                label: '输入框',
                icon: 'icon-write',
                options: {
                  type: 'text',
                  width: '100%',
                  defaultValue: '',
                  placeholder: '请输入',
                  clearable: false,
                  maxLength: null,
                  hidden: false,
                  disabled: false
                },
                model: 'input_1619948973892',
                key: 'input_1619948973892',
                help: '',
                prefix: '',
                suffix: '',
                rules: [{ required: false, message: '必填项' }]
              },
              {
                type: 'textarea',
                label: '文本框',
                icon: 'icon-edit',
                options: {
                  width: '100%',
                  minRows: 4,
                  maxRows: 6,
                  maxLength: null,
                  defaultValue: '',
                  clearable: false,
                  hidden: false,
                  disabled: false,
                  placeholder: '请输入'
                },
                model: 'textarea_1619948974269',
                key: 'textarea_1619948974269',
                help: '',
                rules: [{ required: false, message: '必填项' }]
              }
            ],
            key: 'card_1619948983395'
          },
          {
            type: 'table',
            label: '表格布局',
            trs: [
              {
                tds: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: 'slider',
                        label: '滑动输入条',
                        icon: 'icon-menu',
                        options: {
                          width: '100%',
                          defaultValue: 0,
                          disabled: false,
                          hidden: false,
                          min: 0,
                          max: 100,
                          step: 1,
                          showInput: false
                        },
                        model: 'slider_1619948976300',
                        key: 'slider_1619948976300',
                        help: '',
                        rules: [{ required: false, message: '必填项' }]
                      }
                    ]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: 'uploadImg',
                        label: '上传图片',
                        icon: 'icon-image',
                        options: {
                          defaultValue: '[]',
                          multiple: false,
                          hidden: false,
                          disabled: false,
                          width: '100%',
                          data: '{}',
                          limit: 3,
                          placeholder: '上传',
                          fileName: 'image',
                          headers: {},
                          action: 'http://cdn.kcz66.com/upload-img.txt',
                          listType: 'picture-card'
                        },
                        model: 'uploadImg_1619948977239',
                        key: 'uploadImg_1619948977239',
                        help: '',
                        rules: [{ required: false, message: '必填项' }]
                      },
                      {
                        type: 'time',
                        label: '时间选择框',
                        icon: 'icon-time',
                        options: {
                          width: '100%',
                          defaultValue: '',
                          disabled: false,
                          hidden: false,
                          clearable: false,
                          placeholder: '请选择',
                          format: 'HH:mm:ss'
                        },
                        model: 'time_1619948975820',
                        key: 'time_1619948975820',
                        help: '',
                        rules: [{ required: false, message: '必填项' }]
                      }
                    ]
                  }
                ]
              },
              {
                tds: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: 'radio',
                        label: '单选框',
                        icon: 'icon-danxuan-cuxiantiao',
                        options: {
                          disabled: false,
                          hidden: false,
                          defaultValue: '',
                          dynamicKey: '',
                          dynamic: false,
                          options: [
                            { value: '1', label: '选项1' },
                            { value: '2', label: '选项2' },
                            { value: '3', label: '选项3' }
                          ]
                        },
                        model: 'radio_1619948974588',
                        key: 'radio_1619948974588',
                        help: '',
                        rules: [{ required: false, message: '必填项' }]
                      }
                    ]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: 'date',
                        label: '日期选择框',
                        icon: 'icon-calendar',
                        options: {
                          width: '100%',
                          defaultValue: '',
                          rangeDefaultValue: [],
                          range: false,
                          showTime: false,
                          disabled: false,
                          hidden: false,
                          clearable: false,
                          placeholder: '请选择',
                          rangePlaceholder: ['开始时间', '结束时间'],
                          format: 'YYYY-MM-DD'
                        },
                        model: 'date_1619948975548',
                        key: 'date_1619948975548',
                        help: '',
                        rules: [{ required: false, message: '必填项' }]
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              width: '100%',
              bordered: true,
              bright: false,
              small: true,
              customStyle: ''
            },
            key: 'table_1619948992003'
          },
          {
            type: 'uploadFile',
            label: '上传文件',
            icon: 'icon-upload',
            options: {
              defaultValue: '[]',
              multiple: false,
              disabled: false,
              hidden: false,
              drag: false,
              downloadWay: 'a',
              dynamicFun: '',
              width: '100%',
              limit: 3,
              data: '{}',
              fileName: 'file',
              headers: {},
              action: 'http://cdn.kcz66.com/uploadFile.txt',
              placeholder: '上传'
            },
            model: 'uploadFile_1619948976948',
            key: 'uploadFile_1619948976948',
            help: '',
            rules: [{ required: false, message: '必填项' }]
          },
          {
            type: 'cascader',
            label: '级联选择器',
            icon: 'icon-guanlian',
            options: {
              disabled: false,
              hidden: false,
              showSearch: false,
              placeholder: '请选择',
              clearable: false,
              dynamicKey: '',
              dynamic: true,
              options: [
                {
                  value: '1',
                  label: '选项1',
                  children: [{ value: '11', label: '选项11' }]
                },
                {
                  value: '2',
                  label: '选项2',
                  children: [{ value: '22', label: '选项22' }]
                }
              ]
            },
            model: 'cascader_1619948977724',
            key: 'cascader_1619948977724',
            help: '',
            rules: [{ required: false, message: '必填项' }]
          },
          {
            type: 'treeSelect',
            label: '树选择器',
            icon: 'icon-tree',
            options: {
              disabled: false,
              multiple: false,
              hidden: false,
              clearable: false,
              showSearch: false,
              treeCheckable: false,
              placeholder: '请选择',
              dynamicKey: '',
              dynamic: true,
              options: [
                {
                  value: '1',
                  label: '选项1',
                  children: [{ value: '11', label: '选项11' }]
                },
                {
                  value: '2',
                  label: '选项2',
                  children: [{ value: '22', label: '选项22' }]
                }
              ]
            },
            model: 'treeSelect_1619948978156',
            key: 'treeSelect_1619948978156',
            help: '',
            prefix: '',
            suffix: '',
            rules: [{ required: false, message: '必填项' }]
          }
        ],
        config: {
          layout: 'horizontal',
          labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
          wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
          hideRequiredMark: false,
          customStyle: ''
        }
      }
    }
  },
  methods: {
    handleSubmit(p) {
      // 通过表单提交按钮触发，获取promise对象
      p()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res))
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    show() {
      this.$refs.KFB.show(['date_1619948975172'])
    },
    hide() {
      this.$refs.KFB.hide(['date_1619948975172'])
    },
    disable() {
      this.$refs.KFB.disable(['date_1619948975172'])
    },
    enable() {
      this.$refs.KFB.enable(['date_1619948975172'])
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res))
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    }
  }
}
</script>
